// ==UserScript==
// @name        有赞客户信息导出
// @namespace   youzan
// @match       https://crm.youzan.com/crm/member/import*
// @grant       none
// @version     1.1
// @author      jialesmile
// @description 用于有赞的客户已导入列表的一个导出功能，方便导出全部的数据，不用去翻页复制了
// @updateTime  2024/8/8 7:17:11
// @icon        https://gitee.com/tangjiale/tampermonkey/raw/master/icon/youzan.svg
// @homepageURL https://gitee.com/tangjiale/tampermonkey
// @updateURL   https://gitee.com/tangjiale/tampermonkey/raw/master/youzan/youzan_member_export.js
// @downloadURL https://gitee.com/tangjiale/tampermonkey/raw/master/youzan/youzan_member_export.js
// @require     https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
// @require     https://gitee.com/tangjiale/tampermonkey/raw/master/utils/common.js
// @require     https://gitee.com/tangjiale/tampermonkey/raw/master/utils/excel.js
// ==/UserScript==

(function () {

    // 在页面加载完成后执行代码
    window.onload = function () {
        console.log("客户列表导出插件加载成功");

        // 添加自定义CSS
        addCustomCSS();

        // 初始插入按钮
        insertButtons();

        // 监控表格变化
        observeTableChanges();
    };

    // 插入按钮的函数
    function insertButtons() {
        // 清除已有的自定义按钮
        removeExistingButtons();

        // 获取第一个 .zent-grid-tbody 元素
        const firstTbody = document.querySelector('.zent-grid-tbody');

        if (!firstTbody) {
            console.log('未找到 .zent-grid-tbody 元素');
            return;
        }

        // 获取第一个 .zent-grid-tbody 下的所有 .zent-grid-tr 元素
        const targetDivs = firstTbody.querySelectorAll('.zent-grid-tr');

        // 遍历所有的targetDivs元素，并插入按钮
        targetDivs.forEach(function (targetDiv, index) {

            // 获取importId
            const importId = getImportId(targetDiv);
            if (importId != null) {
                // 文件名称
                const fileName = getFileName(targetDiv);

                // 创建按钮元素
                const button = createButton();

                // 获取需要增加元素的父元素
                const tableOperationsDiv = targetDiv.querySelector('td div span');
                if (tableOperationsDiv != null) {
                    // 添加点击事件
                    button.addEventListener("click", function () {

                        // 获取用户信息
                        getAllUserDataList(1, 50, [], importId)
                            .then(function (response) {
                                // console.log("当前的列表数据=" + JSON.stringify(response));
                                // 导出excel
                                exportToExcel(response, fileName);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    });

                    // 将按钮插入到div元素中：'beforebegin'：在目标元素之前、'afterbegin'：在目标元素内部的开头、'beforeend'：在目标元素内部的结尾、'afterend'：在目标元素之后
                    tableOperationsDiv.insertAdjacentElement('afterend', button);
                }
            }
        });
    }

    function createButton() {
        const button = document.createElement("button");
        button.innerText = "导出";
        button.setAttribute("type", "button");
        button.setAttribute("data-zv", "10.0.10");
        button.classList.add("custom-button");
        return button;
    }

    // 清除已有的自定义按钮
    function removeExistingButtons() {
        const existingButtons = document.querySelectorAll('.custom-button');
        existingButtons.forEach(button => button.remove());
    }

    // 节流函数
    function throttle(func, limit) {
        let lastFunc;
        let lastRan;
        return function () {
            const context = this;
            const args = arguments;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(function () {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(context, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    }

    // 防抖动函数
    function debounce(func, wait) {
        let timeout;
        return function () {
            const context = this, args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), wait);
        };
    }

    // 监控表格变化的函数
    function observeTableChanges() {
        const targetNode = document.querySelector('.zent-grid-tbody');
        if (!targetNode) {
            console.log("未找到 .zent-grid-tbody 元素");
            return;
        }
        // 配置observer的选项，指定需要观察的变化类型
        const config = {
            childList: true, // 观察子节点的增减
            characterData: false, // 观察节点数据的变化
            subtree: false // 观察后代节点的变化
        };
        const callback = throttle(function (mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === "childList") {
                    console.log("表格内容发生变化，重新插入按钮");
                    insertButtons();
                }
            }
        }, 500); // 500 毫秒节流

        const observer = new MutationObserver(callback);
        observer.observe(targetNode, config);
    }

    // 异步获取所有的数据
    async function getAllUserDataList(page = 1, pageSize = 50, list = [], importId) {
        try {
            const data = await getUserDataList(page, pageSize, importId);
            if (data && data.data && Array.isArray(data.data.importRowDTOList)) {
                if (data.data.importRowDTOList.length > 0) {
                    // 合并页面数据
                    list = [...list, ...data.data.importRowDTOList.map(item => ({
                        "手机号/卡号": item.userMobile,
                        "姓名": item.columnFieldMap.name?.value || "",
                        "积分": item.columnFieldMap.points?.value || "",
                        "储值本金": item.columnFieldMap.prepaid_balance?.value || "",
                        "储值赠送金": item.columnFieldMap.prepaid_balance_bonus?.value || "",
                        // "状态": item.status,
                        "分组标签": item.columnFieldMap.salesman_tags?.value || ""
                    }))];
                    page++; // Increment the page number
                    return getAllUserDataList(page, pageSize, list, importId);
                }
            } else {
                return list;
            }
        } catch (error) {
            console.error("Error fetching user data:", error);
            throw error;
        }
    }

    // 获取用户列表信息
    function getUserDataList(page, pageSize, importId) {
        return new Promise(function (resolve, reject) {
            const xhr = new XMLHttpRequest();
            const url = `https://crm.youzan.com/crm/member/import/api/getTaskDetailList?page=${page}&pageSize=${pageSize}&importId=${importId}&result=&identityValue=`;
            xhr.open("GET", `${url}`, true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        resolve(response);
                    } else {
                        reject(xhr.status);
                    }
                }
            }
        });
    }

    // 获取文件名称
    function getFileName(targetDiv) {
        // 获取所有 <td> 元素
        const tdElements = targetDiv.querySelectorAll("td");

        // 检查是否有至少三个 <td> 元素
        if (tdElements.length >= 4) {

            // 选择第三个 <td> 元素（索引从 0 开始）
            const importName = tdElements[2];

            // 获取第三个 <td> 元素中的 div 元素
            const tdFileNameDiv = importName.querySelector("div div");

            // 获取 div 元素的文本内容
            const fileName = tdFileNameDiv ? tdFileNameDiv.textContent : "未找到文件名";

            // 获取成功的条数
            const importSuccessCount = tdElements[4]
            const tdSuccessCountDiv = importSuccessCount.querySelector("div span a");
            return tdSuccessCountDiv ? fileName + "_" + tdSuccessCountDiv.textContent : fileName;
        } else {
            console.log("目标元素中没有足够的 <td> 元素");
        }
    }

    // 获取当前行的importId
    function getImportId(targetDiv) {
        // 找到当前行的importId
        const importLink = targetDiv.querySelector("td div span a");
        const href = importLink ? importLink.getAttribute("href") : "";
        const importIdMatch = href.match(/importId=(\d+)/);
        return importIdMatch ? importIdMatch[1] : null;
    }

    // 添加自定义css样式
    function addCustomCSS() {
        const style = document.createElement("style");
        style.type = 'text/css';
        style.innerHTML = `
        .custom-button {
            background-color: red;
            color: white;
            border: none;
            padding: 2px 4px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 10px;
            margin: 4px 8px;
            cursor: pointer;
            border-radius: 4px;
        }
        `;
        document.head.appendChild(style);
    }

})();
